package myJs.components

import japgolly.scalajs.react.ReactMonocle._
import japgolly.scalajs.react._
import japgolly.scalajs.react.component.Scala.BackendScope
import japgolly.scalajs.react.extra.StateSnapshot
import japgolly.scalajs.react.vdom.all._
import monocle.Lens
import monocle.macros.Lenses
import myJs.components.inline.SelectInlineComponent
import myJs.tool.Tool._

import scala.collection.immutable.SeqMap

/** Created by yz on 3/11/2020
  */
object HeatmapColorComponent {

  @Lenses
  case class State(color: String)

  object State {

    def init = {
      State(color = "#FF0000:#CC00FF")
    }

  }

  class Backend(bs: BackendScope[Unit, State]) {

    def render(s: State) = {

      implicit class MyLens[T](lens: Lens[State, T]) {

        def zoomL(implicit r: Reusability[T]) = {
          StateSnapshot.withReuse.zoomL(lens).prepareVia(bs).apply(s)
        }

      }

      val optionMap = SeqMap(
        "#1E90FF:#FFFF00:#E41A1C" -> s"${messages("blue")}-${messages("yellow")}-${messages("red")}（Low value -> High value）",
        "#1E90FF:#FFFFFF:#E41A1C" -> s"${messages("blue")}-${messages("white")}-${messages("red")}（Low value -> High value）",
        "navyblue:white:firebrick" -> s"${messages("navyblue")}-${messages("white")}-${messages("firebrick")}（Low value -> High value）",
        "custom" -> s"${messages("setColorManually")}"
      )
      val customShow = s.color == "custom"

      div(
        SelectInlineComponent
          .Props(State.color.zoomL, label = messages("fillColors"), name = "colorsStr", optionMap = optionMap)
          .render,
        div(
          border := "1px solid lightgrey",
          borderRadius := "5px",
          padding := "10px 5px",
          marginBottom := "10px",
          (display := "none").unless(customShow),
          h5(marginBottom := "15px", messages("selectColor")),
          div(id := "customColors"),
          div(
            `class` := "form-group",
            div(
              `class` := "actions col-sm-offset-2 col-sm-6",
              button(
                `type` := "button",
                `class` := "btn btn-default myAddColor",
                title := s"${messages("add")}",
                i(`class` := "fa fa-plus"),
                s" ${messages("add")}"
              )
            )
          )
        )
      )

    }

  }

  def component(state: State) = {
    ScalaComponent.builder[Unit].initialState(state).renderBackend[Backend].build
  }

  val Component = component(State.init)

}
